<template>

  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>编辑内容</el-breadcrumb-item>
      <el-breadcrumb-item>电影列表</el-breadcrumb-item>
      <el-breadcrumb-item>编辑电影</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="template_title">
      编辑电影
    </div>

    <div style="text-align: left">

      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" title="编辑电影">

        <el-form-item label="电影名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 615px"></el-input>
        </el-form-item>
        <el-form-item label="导演" prop="director">
          <el-input v-model="ruleForm.director" style="width: 615px"></el-input>
        </el-form-item>
        <el-form-item label="时间长度" prop="time_length">
          <el-input v-model="ruleForm.time_length" style="width: 615px"></el-input>
        </el-form-item>

        <el-form-item label="上映日期" required>
          <el-col :span="12">
            <el-form-item prop="pub_date">
              <el-date-picker v-model="ruleForm.pub_date" placeholder="选择日期" style="width: 100%;"
                              type="date"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="电影类型" prop="categories">
          <el-checkbox-group v-model="cateList">

            <el-checkbox v-for="category in allCateList" :id="category.id + ''" :label="category.id" name="categories">
              {{ category.catname }}
            </el-checkbox>

          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="电影简介" prop="description">
          <el-col :span="12">
            <el-input v-model="ruleForm.description" rows="5" type="textarea"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="电影缩略图" prop="pic">
          <el-upload
              ref="upload"
              :auto-upload="false"
              :file-list="fileList"
              :limit="1"
              :multiple="false"
              :on-change="fileChange"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              list-type="picture-card"
              name="file">

            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">

              <img v-if="ruleForm.pic !== ''" :src="'data:image/png;base64,' + ruleForm.pic"
                   alt="" class="el-upload-list__item-thumbnail">

              <img v-else :src="file.url"
                   alt="" class="el-upload-list__item-thumbnail">
              <span class="el-upload-list__item-actions">
                  <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>

                  <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                  </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt="" width="100%">
          </el-dialog>
        </el-form-item>
        <el-form-item style="width: 600px; text-align: center">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditMovie",
  data() {
    return {
      disabled: false,
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [{url: '', name: ''}],
      allCateList: [],
      cateList: [],
      ruleForm: {
        id: 0,
        name: '',
        director: '',
        pub_date: '',
        time_length: '',
        rating: 0.0,
        description: '',
        categories: [],
        pic: ''
      },

      rules: {
        name: [
          {required: true, message: '请输入电影名称', trigger: 'blur'},
          {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
        ],
        director: [
          {required: true, message: '请输入导演姓名', trigger: 'blur'}
        ],

        time_length: [
          {required: true, message: '请输入播放时间长度', trigger: 'blur'}
        ],
        /*pub_date: [
          { type: 'date', required: true, message: '请选择上映日期', trigger: 'change'}
        ],*/
        /*categories: [
          {type: 'array', required: true, message: '请至少选择一个类型', trigger: 'change'}
        ],*/
        description: [
          {required: true, message: '请填写电影内容简介', trigger: 'blur'}
        ]

      }
    };
  },
  mounted() {
    this.$http.get(
        '/api/movie/editMovie?movieId=' + this.$route.query.movieId
    ).then(res => {
      // 把movie中需要显示在页面上的数据赋值给form中的相关属性
      this.ruleForm.id = res.data.movie.id;
      this.ruleForm.name = res.data.movie.name;
      this.ruleForm.director = res.data.movie.director;
      this.ruleForm.pic = res.data.movie.pic;
      this.ruleForm.pub_date = new Date(res.data.movie.pub_date);
      this.ruleForm.time_length = res.data.movie.time_length;
      this.ruleForm.description = res.data.movie.description;

      // 把电影的类型列表显示
      let cateList = res.data.movie.cateList;
      for (let i = 0; i < cateList.length; i++) {
        this.cateList[i] = cateList[i].id;
      }
      // 所有类型对应的一个列表
      this.allCateList = res.data.allCateList;
    })

  },

  methods: {
    handleRemove: function (file, fileList) {
      this.ruleForm.pic = '';
      this.fileList = fileList;
    },
    fileChange: function (file, fileList) {
      this.fileList = fileList;
    },
    handlePictureCardPreview: function (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    cancel() {
      this.$router.push("/movieList")
    },
    editMovie() {
      let dataForm = new FormData;
      if (this.fileList.length > 0) {
        dataForm.append("file", this.fileList[0].raw)
      } else {
        dataForm.append("file", null)
      }
      dataForm.append("movie", JSON.stringify(this.ruleForm))
      this.$http.post("/api/movie/updateMovie", dataForm, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
          .then(res => {
            this.$message.success("修改成功")
          })
          .catch(res => {
            this.$message.error("修改电影信息失败")
            return false;
          })
      return true;
    },
    submitForm() {
      let self = this

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.categories = this.cateList;
          //这里是调用组件的提交方法
          if (!this.editMovie()){
            return false;
          }
            self.dialogVisible = false;
          // 更新成功后,跳转到电影列表页面
          this.$router.push("/movieList")
        } else {
          this.$message.error("提交失败");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    }
  }
}
</script>

<style scoped>
#el-input {
  width: 400px;
}

.template_title {
  line-height: 40px;
  width: 500px;
  text-align: center;
  height: 60px;
  margin-top: 0px;
  font-size: 24px;
  color: #226655;
  margin-top: 30px;
}
</style>